import React, { Component } from 'react';

import './App.styl';



import { BrowserRouter as Router, Route, 
  Prompt, Redirect, Link, NavLink, Switch } from 'react-router-dom';
import Home from 'pages/home/Index'
import List from 'pages/list/Index'
// import Detail from 'pages/detail/Index'
import MouseTracker from 'pages/test/MouseTracker'
import ErrorBoundary from 'components/error/ErrorBoundary'
import ShowButton from 'pages/test/ContextRef'
import CursionRoute from 'pages/recusion-route/Index'
import { bold, red } from 'ansi-colors';
// import './redux/store'
// import ModalGallery from 'pages/router-try/ModalGallery'
import {Provider} from 'react-redux'
import {createStore} from 'redux'
import todoApp from 'components/redux/reducers'
import TodoMVC from 'components/todomvc/Index'
//https://cn.redux.js.org/docs/basics/UsageWithReact.html
class App extends Component {
  constructor() {
    super()
    const supportsHistory = 'pushState' in window.history
    this.state = {supportsHistory}
  }
  getConfirmation = (msg, cb) => {
    console.log('---------');
    const allowTransition = window.confirm(msg)
    cb(allowTransition)
  }
  checkLink = (match, location) => {
    if(!match) {
      return false
    }
    console.log(location);
    return false
  }
  render() {
    let store = createStore(
      todoApp,
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
    return (
        <ErrorBoundary>
          <Provider store={store}>
           <Router getUserConfirmation={this.getConfirmation} forceRefresh={this.supportsHistory}>
            {/* <Switch> */} 
            <div>
              <ul>
                <li><Prompt message={location=>{
                  const isApp = location.pathname.startsWith('/home')
                  return isApp?`你确定要离开当前页面到${location.pathname}吗？`:true}}/></li>
                <li><NavLink to='/home' activeStyle={{fontWeight:'bold',color:'red'}}>home</NavLink></li>
                <li><NavLink to='/list' 
                  activeStyle={{fontWeight:'bold',color:'red'}}
                  isActive={this.checkLink}>
                  list
                  </NavLink>
                </li>
                <li><NavLink to='/show' activeStyle={{fontWeight:'bold',color:'red'}}>show</NavLink></li>
                <li><NavLink to='/cursions' activeStyle={{fontWeight:'bold',color:'red'}}>cursions</NavLink></li>
                <li><NavLink to='/todomvc' activeStyle={{fontWeight:'bold',color:'red'}}>todomvc</NavLink></li>
            
              </ul>
              <Route exact path="/home" component={Home}/>
              <Route exact path="/list" component={List}/>
              {/*<Route exact path="/detail" component={Detail}/>*/}
              <Route exact path="/render" component={MouseTracker}/>
              <Route exact path="/show" component={ShowButton}/>
              <Route exact path="/cursions" component={CursionRoute}/>
              <Route exact path="/todomvc" component={TodoMVC}/>
              <Route path="/show" children={({match, location})=>{
                // console.log(location);
                return match?<h1>match!</h1>:<h1>not match!</h1>
              }}/>
              {/* <Redirect from='/' to='/home'/> */}
            </div>
            {/* </Switch> */}
          </Router>
          </Provider>
        </ErrorBoundary>
        // <ModalGallery/>
    );
  }
}

export default App;
